<template>
    <div>
        <div class="cmditem " :class="isRuning?'bgcolor-yellow':''" :style="'padding-left:'+(level*20)+'px'" v-show="isShow">
            <span class="cmdidx" @dblclick="changeLevel" @contextmenu.prevent="changeLevel" title="左键双击修改为子命令,右键单击修改为父命令">{{cmdIndex}}</span>
            <exSelect v-model="cmdInfo.type" label="" :dictList="typeList" size="mini" elstyle="width:110px;min-width:110px;margin-top:5px;"></exSelect>
            <i class="el-icon-caret-right" :class="isRuning?'red':'blue'" title="执行当前指令" @click="runCmd(true)" ></i>
            <i class="el-icon-top blue" title="上升" @click="movePos(1)" ></i>
            <i class="el-icon-bottom blue" title="下降" @click="movePos(0)" ></i>
            <i class="el-icon-plus blue" title="添加子命令" @click="addSubCmd" v-if="selCmd.hasChild"></i>
            <el-tooltip placement="bottom" effect="light">
                <div slot="content" style="padding:5px 10px;">
                    <el-row class="mt5"><i class="el-icon-view blue" title="预览数据" @click="preView" >预览数据</i></el-row>
                    <el-row class="mt5"><i class="el-icon-document-copy blue" title="自动填充" @click="setByDevInfo" >自动填充</i></el-row>
                    <el-row class="mt5"><i class="el-icon-delete blue" title="删除指令" @click="delCmd" >删除指令</i></el-row>
                </div>
                <i class="el-icon-menu blue"></i>
            </el-tooltip>
            <!-- <el-button size="mini" type="primary" @click="setByDevInfo">自动填充</el-button> -->
            <component v-if="cmdInfo.type" :is="cmdInfo.type+'Cmp'" ref="comEl" :cmdInfo="cmdInfo" :devInfo="devInfo" :cmdIdx="cmdIdx" @stopRun="stopRun"></component>
        </div>
        <template>
            
            <cmditem v-for="(item,idx) in cmdInfo.children" :key="idx" :cmdInfo="item" :cmdIdx="idx" :cmdList="cmdInfo.children"
                :devInfo="devInfo" :ref="'cmd'+idx" @delCmd="delCmd" @changeLevel="changeLevel"></cmditem>
        </template>

    </div>
</template>


<script>

const allComponents = require.context('./cmd', false, /^.*Cmp\.vue$/)
let res_components = {}
allComponents.keys().forEach(fileName => {
  let comp = allComponents(fileName)
  res_components[fileName.replace("./","").replace(".vue","")] = comp.default
})

export default {
    name: "cmditem",
    components: res_components,
    props: {
        cmdList: { type: Array, default: [] },
        cmdInfo: { type: Object, default: {} },
        cmdIdx :{ type: Number, },
        devInfo:{ type: Object, default: {} },
    },
    data() {
        this.cmdInfo.level = this.cmdInfo.level || 0;
        this.cmdInfo.appPath = this.cmdInfo.appPath || "";
        this.cmdInfo.x1 = this.cmdInfo.x1 || 0;
        this.cmdInfo.y1 = this.cmdInfo.y1 || 0;
        this.cmdInfo.x2 = this.cmdInfo.x2 || 0;
        this.cmdInfo.y2 = this.cmdInfo.y2 || 0;
        return {
            typeList:[
                {name:"单次点击",value:"click"},
                {name:"滑动",value:"move"},
                {name:"等待",value:"wait"},
                {name:"文本备注",value:"remark"},
                {name:"逻辑-if",value:"if",hasChild:true},
                {name:"逻辑-循环",value:"for",hasChild:true},
                {name:"逻辑-continue",value:"continue"},
                {name:"逻辑-break",value:"break"},
                {name:"矩形内随机移动",value:"rect"},
                {name:"查找图形",value:"findRect"},
                {name:"系统功能",value:"key"},
                {name:"定时",value:"timer"},
                {name:"循环点击",value:"circle"},
                {name:"打开程序",value:"openApp"},
                {name:"关闭程序",value:"stopApp"},
            ],
            isRuning : false,
            level : this.cmdInfo.level || 0,
            isShow : true,
        };
    },
    watch:{
        "cmdInfo.level"(newval){
            this.level = newval || 0
        },
        cmdInfo(){
            this.refresh();
        }
    },
    computed:{
        selCmd(){
            var cmd = {};
            var cmdInfo = this.cmdInfo || {}
            cmd = this.typeList.find((item)=>{return item.value==cmdInfo.type})
            return cmd||{};
        },
        cmdIndex(){
            return (this.cmdIdx+1)+".";
        }
    },
    inject: ['moveCmd'],

    mounted() {
    },

    methods: {
        refresh(){
            this.isShow = false;
            this.$nextTick(()=>{
                this.isShow = true;
            })
        },
        changeLevel(e){
            this.$emit("changeLevel",this.cmdIdx,e.button==0)
        },
        setByDevInfo(){
            if(this.$refs.comEl.setByDevInfo) this.$refs.comEl.setByDevInfo()
        },
        addSubCmd(){
            this.addCmd({type:"",level:this.level+1},this.cmdIdx+1);
        },
        movePos(type){
            this.moveCmd(this.cmdIdx,type)
        },
        saveCmd(){
            if(this.$refs.comEl && this.$refs.comEl.saveCmd) this.$refs.comEl.saveCmd()
        },
        runCmd(isOnce){
            if(isOnce) this.initCmd()
            if(this.isRuning){
                this.stopCmd();
            }else{
                this.isRuning = true;
                if(this.$refs.comEl.runCmd) this.$refs.comEl.runCmd(isOnce)
            }
        },
        initCmd(){
            if(this.$refs.comEl.initCmd) this.$refs.comEl.initCmd()
        },
        stopCmd(){
            if(this.$refs.comEl.stopCmd) this.$refs.comEl.stopCmd()
        },
        stopRun(){
            this.isRuning = false;
        },
        delCmd(){
            this.$emit("delCmd",this.cmdIdx)
        },
        preView(){
            if(this.$refs.comEl.preView) this.$refs.comEl.preView()
        }
    }
}
</script>

<style lang="less" scoped>
.cmditem{
    border-bottom: 1px gray dotted;
    padding-bottom: 5px;
    vertical-align: top;
    >i{
        margin-top: 10px;
        display: inline-block;
    }
    >.cmdidx{
        margin-top: 7px;
        display: inline-block;
    }
    *{
        vertical-align: top;
    }
}
</style>
<style>

</style>
